.cube-container {
    position: relative;

}
.cube-container .cube-inner {
    position: absolute;
    transition: all 2s cubic-bezier(.56,.03,.56,1.08);
    left: 0%;
    top: 0%;
    margin: 0;
    transform-style: preserve-3d;
    perspective: 1000; 
    transform: scale(1) rotateX(0) rotateY(0) translateY(0px);
}
.cube-container.gather .cube-inner {
    width: 300px !important;
    height: 300px !important;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    animation: run 30s linear infinite;
}
.cube-inner > [class^=plane-] {
    position: absolute;
    width: 300px;
    height: 300px;
    transition: all 1s ease;
    transform: rotateY(0) translateZ(0);
}
.cube-inner > .plane-front,
.cube-inner > .plane-back {
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    z-index: -1;
    transform: scale(0) translateZ(0);
}
.cube-container.gather > .cube-inner [class^=plane-] {
    z-index: 0;
    display: block;
}
.cube-inner > .plane-left   {transition-delay: .1s; left: 0; top: 0;}
.cube-inner > .plane-top    {transition-delay: .3s; right: 0; top: 0;}
.cube-inner > .plane-right  {transition-delay: .6s; right: 0; bottom: 0;}
.cube-inner > .plane-bottom {transition-delay: .9s; left: 0; bottom: 0;}

.gather .cube-inner > .plane-front {
    transform: scale(1) translateZ(-150px);
}
.gather .cube-inner > .plane-back {
    transform: scale(1) translateZ(150px);
}

.gather .cube-inner > .plane-left   {
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    transform: rotateY(90deg) translateZ(-150px);
}
.gather .cube-inner > .plane-top    {
    right: 50%;
    top: 50%;
    margin: -150px -150px 0 0;
    transform: rotateY(90deg) translateZ(150px);
}
.gather .cube-inner > .plane-right  {
    right: 50%;
    bottom: 50%;
    margin: 0 -150px -150px 0;
    transform: rotateX(90deg) translateZ(-150px);
}
.gather .cube-inner > .plane-bottom {
    left: 50%;
    bottom: 50%;
    margin: 0 0 -150px -150px;
    transform: rotateX(90deg) translateZ(150px);
}

@keyframes run {
    0% {
        transform: scale(1) rotateX(0) rotateY(0) translateY(0px)
    }
    10% {
        transform: scale(.5) rotateX(60deg) rotateY(100deg) translateY(0px)
    }
    40% {
        transform: scale(.4) rotateX(270deg) rotateY(450deg) translateY(100px)
    }
    60% {
        transform: scale(.3) rotateX(200deg) rotateY(250deg) translateY(-40px)
    }
    90% {
        transform: scale(.4) rotateX(-60deg) rotateY(-100deg) translateY(0px)
    }
    100% {
        transform: scale(1) rotateX(0) rotateY(0) translateY(0px)
    }
}